<template>
  <div>
    <el-dialog
      v-model="dialogVisible"
      width="80%"
      align-center
      :show-close="false"
      @close="handleClose"
      destroy-on-close
      draggable
    >
      <template #header="{ close }">
        <div class="dialog-header flex justify-between items-center">
          <div>项目新增</div>
          <el-icon class="el-icon--left cursor-pointer" @click="close"
            ><CircleCloseFilled color="#fff"
          /></el-icon>
        </div>
      </template>
      <!-- 步骤条 -->
      <div class="pt-[30px] pb-[20px] bg-white">
        <el-steps :active="activeStep" align-center>
          <el-step title="1.立项信息" />
          <el-step title="2.项目成员" />
          <el-step title="3.项目预算" />
          <el-step title="4.项目文档" />
          <el-step title="5.完成登记" />
        </el-steps>
      </div>
      <ProjectBaseInfo v-if="activeStep != 0" />
      <!-- 1.立项信息 -->
      <ProjectInfoEdit
        v-if="activeStep == 0"
        ref="projectInfoEditRef"
        @saveSuccess="infoSaveSuccess"
        @save-ok="loading = false"
      />
      <!-- 2.项目成员 -->
      <ProjectMemberEdit
        v-if="activeStep == 1"
        ref="projectMemberEditRef"
        @saveSuccess="memberSaveSuccess"
        @save-ok="loading = false"
      />
      <!-- 3.项目预算 -->
      <ProjectBudgetEdit
        v-if="activeStep == 2"
        ref="projectBudgetEditRef"
        @saveSuccess="budgetSaveSuccess"
        @save-ok="loading = false"
      />
      <!-- 4.项目文档 -->
      <ProjectDocumentEdit
        v-if="activeStep == 3"
        ref="projectDocumentEditRef"
        @saveSuccess="documentSaveSuccess"
        @save-ok="loading = false"
      />
      <!-- 5.完成登记 -->
      <div class="bg-white mt-[30px]" v-if="activeStep == 4">
        <el-result
          icon="success"
          title="信息登记完成！"
          :sub-title="
            verifyRoleType.iskycgly()
              ? '信息已暂存，您可以直接审核通过。'
              : '信息已暂存，您可以直接提交，由管理员进行审核。'
          "
        >
        </el-result>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <div class="operate-btns">
            <el-button type="primary" v-if="activeStep != 0" @click="toPrevStep">上一步</el-button>
            <el-button type="primary" @click="toNextStep" v-if="activeStep != 4" :loading="loading"
              >下一步</el-button
            >
            <el-button type="primary" v-if="activeStep > 1 && activeStep < 4" @click="jumpNextStep"
              >跳过</el-button
            >
            <el-button
              type="primary"
              v-if="activeStep == 4 && verifyRoleType.isKyry()"
              @click="save(1)"
              :loading="loading"
              >提交</el-button
            >
            <el-button
              type="primary"
              v-if="activeStep == 4 && verifyRoleType.iskycgly()"
              @click="save(2)"
              :loading="loading"
              >审核通过</el-button
            >
            <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { saveOrCheckOk } from "@/api/project/zx/lxxm";
import ProjectBaseInfo from "./ProjectBaseInfo.vue";
import ProjectInfoEdit from "./ProjectInfoEdit.vue";
import ProjectMemberEdit from "./ProjectMemberEdit.vue";
import ProjectBudgetEdit from "./ProjectBudgetEdit.vue";
import ProjectDocumentEdit from "./ProjectDocumentEdit.vue";
import useCommonFetch from "@/hooks/useCommonFetch";
import { verifyRoleType } from "@/utils/main";
import { ElMessage } from "element-plus";
/**获取公共下拉数据开始*/
const memberTypeList = useCommonFetch("成员类型");
const unitList = useCommonFetch("成果归属单位");
const allUnitList = useCommonFetch("所有单位");
const projectTypeList = useCommonFetch("项目分类（校级）");
const projectStatusList = useCommonFetch("项目状态");
const tjgsList = useCommonFetch("教育部统计归属");
const jjfwmbList = useCommonFetch("社会经济服务目标");
const hzTypeList = useCommonFetch("合作形式");
const gmjjhyList = useCommonFetch("国民经济行业");
const applierTitleList = useCommonFetch("职称");
const degreeList = useCommonFetch("学位");
const cdTypeList = useCommonFetch("项目-承担角色");
provide("memberTypeList", memberTypeList);
provide("unitList", unitList);
provide("allUnitList", allUnitList);
provide("projectTypeList", projectTypeList);
provide("projectStatusList", projectStatusList);
provide("tjgsList", tjgsList);
provide("jjfwmbList", jjfwmbList);
provide("hzTypeList", hzTypeList);
provide("gmjjhyList", gmjjhyList);
provide("applierTitleList", applierTitleList);
provide("degreeList", degreeList);
provide("cdTypeList", cdTypeList);
/**获取公共下拉数据结束*/
const dialogVisible = ref(false);
const activeStep = ref(0);
const projectInfoEditRef = ref();
const projectMemberEditRef = ref();
const projectBudgetEditRef = ref();
const projectDocumentEditRef = ref();
const operateId = ref(null);
const isAuditor = ref(false);
const taskId = ref(null);
const checkStatus = ref(null);
const loading = ref(false);
provide("id", operateId);
provide("isAuditor", isAuditor);
provide("taskId", taskId);
provide("checkStatus", checkStatus);
const add = async () => {
  operateId.value = null;
  dialogVisible.value = true;
  nextTick(() => {
    projectInfoEditRef.value.add();
  });
};
//点击完善进入时
const edit = (id, isAudit, tId, checkState) => {
  operateId.value = id;
  isAuditor.value = isAudit;
  taskId.value = tId;
  checkStatus.value = checkState;
  dialogVisible.value = true;
  nextTick(() => {
    projectInfoEditRef.value.edit(operateId.value);
  });
};
defineExpose({ add, edit });
//点击上一步
const toPrevStep = () => {
  activeStep.value--;
  nextTick(() => {
    if (activeStep.value == 3) {
      projectDocumentEditRef.value.edit(operateId.value);
    } else if (activeStep.value == 2) {
      projectBudgetEditRef.value.edit(operateId.value);
    } else if (activeStep.value == 1) {
      projectMemberEditRef.value.edit(operateId.value);
    } else {
      projectInfoEditRef.value.edit(operateId.value);
    }
  });
};
//点击下一步
const toNextStep = () => {
  loading.value = true;
  if (activeStep.value == 0) {
    projectInfoEditRef.value.save(-1);
  } else if (activeStep.value == 1) {
    projectMemberEditRef.value.save(-1);
  } else if (activeStep.value == 2) {
    projectBudgetEditRef.value.save(-1);
  } else {
    projectDocumentEditRef.value.save(-1);
  }
};
//点击跳过
const jumpNextStep = () => {
  activeStep.value++;
  if (activeStep.value == 3) {
    nextTick(() => {
      projectDocumentEditRef.value.edit(operateId.value);
    });
  }
};
//基本信息保存成功 赋值operateId
const infoSaveSuccess = (id) => {
  loading.value = false;
  if (id) {
    operateId.value = id;
  }
  activeStep.value++;
  nextTick(() => {
    projectMemberEditRef.value.edit(operateId.value);
  });
};
//成员信息保存成功
const memberSaveSuccess = () => {
  loading.value = false;
  activeStep.value++;
  nextTick(() => {
    projectBudgetEditRef.value.edit(operateId.value);
  });
};
//预算信息保存成功
const budgetSaveSuccess = () => {
  loading.value = false;
  activeStep.value++;
  nextTick(() => {
    projectDocumentEditRef.value.edit(operateId.value);
  });
};
//文档信息保存成功
const documentSaveSuccess = () => {
  loading.value = false;
  activeStep.value++;
};
//提交或审核通过
const save = async (type) => {
  try {
    const params = {
      proId: operateId.value,
      submitType: type,
    };
    loading.value = true;
    const res = await saveOrCheckOk(params);
    if (res.code === 200) {
      dialogVisible.value = false;
      ElMessage({
        message: "操作成功！",
        type: "success",
      });
    }
  } catch (error) {
    console.log(error);
  } finally {
    loading.value = false;
  }
};
const emit = defineEmits(["add-success"]);
//关闭弹窗
const handleClose = () => {
  activeStep.value = 0;
  isAuditor.value = false;
  taskId.value = null;
  checkStatus.value = null;
  loading.value = false;
  //如果operateId有值 表示已经新增了数据 关闭弹窗时抛出事件列表页面执行检索
  if (operateId.value) {
    emit("add-success");
  }
};
</script>

<style scoped lang="scss">
@import url("@/views/project/index.scss");
</style>
